﻿<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" Inherits="MethodWorx.CMS.WebHost._PreviewPage" CodeBehind="PreviewPage.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="padding:4px;background-color:#FFCC66; border:2px solid #FF9933; text-align:center;font-family:Tahoma;font-size:8pt; font-weight: normal;">
    This page is in preview/edit mode, all navigation links have been disabled
</div>
<script language="javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-1.4.1.min.js")%>"></script>
<%=this.Output %>
<style>
    div.cms-content-item,
    div.cms-page-item
    {
        float:left;
        padding:2px;
        border:1px solid silver;
        background-color:#eeeeee;
        margin:2px;
        cursor:pointer;
    }
    
     div.cms-content-item:hover,
    div.cms-page-item:hover
    {
        border:1px solid #d8f0fa;
        	    background-color:#e7f4f9;
    }
    
    
    div.cms-content-item.selected,
    div.cms-page-item.selected
    {
        background-color:#BEEBFF !important;
        	    border:1px solid #99DEFD !important;
    }
</style>
<script language="javascript">
    var cms_url = '<%=this.CmsRequestContext.PreviewSession.CmsUrl %>'
    $(document).ready(function () {

        //disable Click event for links
        $("a").click(function (e) {
            e.preventDefault;
            return false;
        });

        $("div.cms-editable-edit").each(function () {
            if ($(this).attr("cms_contentName") != "" && $(this).attr("cms_contentName") != null) {
                var id = $(this).attr("cms_contentId");
                if ($("#id" + id).length == 0) {
                    $("#cms-content-items").append("<div id=\"id" + id + "\" class=\"cms-content-item\" cms_pageId=\"" + $(this).attr("cms_pageId") + "\" cms_contentId=\"" + $(this).attr("cms_contentId") + "\" cms_propertyName=\"" + $(this).attr("cms_propertyName") + "\">" + $(this).attr("cms_pageName") + ":" + $(this).attr("cms_contentName") + "</div>");
                }
            }
            else {
                $("#cms-content-items").append("<div id=\"id" + id + "\" class=\"cms-page-item\">" + $(this).attr("cms_pageName") + ":" + $(this).attr("cms_propertyName") + "</div>");
            }
        });
        var content_up = false;
        $(".cms-content-item").click(function (e) {
            $(".cms-content-item").removeClass("selected");
            $(".cms-page-items").removeClass("selected");
            $(this).addClass("selected");

            var id = $(this).attr("cms_pageId");
            var contentId = $(this).attr("cms_contentId");
            var propertyName = $(this).attr("cms_propertyName");

            var url = "edit.html#" + cms_url + "/page/editproperty/" + id + "/" + contentId + "/" + propertyName;
            $("#cms-editor-frame").attr("src", url); 
            
               $("#cms-editor").animate({ 
                    height: "75%",
                }, 500 );
            content_up = true;
            e.preventDefault();
            e.stopPropagation(); 
        });

        $(document).click(function()
        {
        if(content_up)
        {
         $("#cms-editor").animate({ 
                    height: "50px",
                }, 500 );
            content_up = true;
            }
        });

    });
</script>
<div id="cms-editor" style="position:fixed;bottom:0px;height:50px;background-color:White;border:1px solid silver;width:100%;padding:0px;z-index:999999">
<table style="height:100%;width:100%">
    <tr>
        <td id="cms-content-items">
        </td>
</tr>
<tr>
    <td colspan="1" style="height:100%"><iframe style="width:100%;height:100%;margin-top:5px;" frameborder="no" name="editorFrame" id="cms-editor-frame">
</iframe></td>
</tr>
</table>

</div>